<!-- home -->
<template>
  <page-view :full="true">
    <top-bar title="设置名字"
             :white="false">
      <div><span class="na-save" @click="saveName">保存</span></div>
    </top-bar>
    <page-content>
      <div class="na-name">
        <input type="text"
               class="na-na"
               v-model="value">
        <van-icon name="cross"
                  color="#AEADB9"
                  size="14"
                  @click="clear"
                  class="na-coin" />
      </div>
    </page-content>
  </page-view>
</template>

<script>
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import service from '@/utils/request';
import { Dialog, Toast } from 'vant';
// 全局注册
export default {
  data () {
    return {
      value: ''
    }
  },
  components: {
    TopBar,
    PageView,
    PageContent
  },
  created(){
    this.user = this.$store.state.user;
    this.value = this.user.nickname
  },
  methods: {
    clear(){
      this.value = "";
    },
    saveName(){
      if(!this.value){
        Dialog({ 
          title: '提示',
          message: '请输入昵称！' 
        })
        return;
      }
      return service.post('/apiModifyMy.do', {
        nickname: this.value,
        user_head: this.user.user_head
      }).then(res=>{
        this.user.nickname = this.value;
        this.$store.dispatch('setUser', this.user)

        this.$router.go(-1);
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.na-save {
  color: #585df9;
}
.na-name {
  height: 55px;
  line-height: 55px;
  background: #ffffff;
  padding: 0 20px;
  margin-top: 85px;
  display: flex;
  justify-content: space-between;
  .na-na {
    border: 0;
    font-size: 16px;
    color: #3d3e54;
  }
  .na-coin {
    margin-right: -20px;
    padding: 20px;
  }
}
</style>
